<template>
    <div class="save-detail-wrap">
        <div class="navbar">
            <div class="title">
                <span>{{ title }}</span>
                <slot class="des" name="title" />
            </div>
            <div class="handle">
                <BaseButton v-if="hasBack" @click="$router.go(-1)">返回</BaseButton>
                <slot name="buttons" />
            </div>
        </div>
        <div class="body-wrap">
            <div class="body" :style="{ 'min-width': width }">
                <!-- 注意：如果body里有form，要把label-width设置为下方的el-form-item__content："86px"，如果86不够，样式要做覆盖 -->
                <slot name="body" />
            </div>
        </div>

        <slot />
    </div>
</template>

<script>
export default {
    name: 'SavePage',
    props: {
        hasBack: {
            type: Boolean,
            default: true
        },
        title: {
            type: String,
            default: '详情'
        },
        width: {
            type: String,
            default: '800px'
        }
    },
    mounted() {
        setTimeout(() => {
            console.log(this.mixWidth)
        })
    }
}
</script>

<style lang="scss">
// 如果body里是自适应的form表单，加上size-auto类
.el-form--inline.size-auto {
    font-size: 20px;
    .el-form-item {
        width: 100%;
        margin-right: 0;
    }
    // form的label-width：72px 根据实际label宽度修改
    .el-form-item__content {
        width: calc(100% - 86px);
    }
    .el-input__inner {
        width: 100%;
    }
    .el-select {
        width: 100%;
    }
}
</style>
<style lang="scss" scoped>
// 新增、修改、详情的自适应样式
.save-detail-wrap {
    width: 100%;
    // min-width: 800px;
    height: 100%;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0px 0px 4px 0px rgba(131, 145, 178, 0.14);
    position: relative;
    overflow-y: auto;
    // 隐藏滚动条
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
    &::-webkit-scrollbar {
        display: none;
    }
    & > .navbar {
        flex: 1;
        padding: 0 16px;
        height: 48px;
        line-height: 48px;
        background: #fafafa;
        border: 1px solid #f0f4f7;
        border-radius: 2px 2px 0 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: sticky;
        top: 0;
        z-index: 100;
        .title {
            margin-right: 16px;
            flex: 1;
            font-size: 14px;
            font-weight: bold;
            color: #171725;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .text {
                margin-right: 24px;
                font-weight: normal;
                color: #44444f;
            }
        }
    }
    .body-wrap {
        height: calc(100% - 48px);
        overflow-x: auto;
    }
    .body {
        padding: 24px 16px;
        ::v-deep .item {
            margin-bottom: 32px;
            font-size: 14px;
            display: flex;
            align-items: flex-start;
            .label {
                color: #171725;
                flex-shrink: 0;
            }
            .value {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                color: #44444f;
            }
        }
        ::v-deep {
            .el-step__head.is-success,
            .el-step__title.is-success {
                font-size: 14px;
                font-weight: normal;
                color: #0062ff;
                border-color: #0062ff;
            }
            .el-step__title.is-process,
            .el-step__title.is-wait {
                font-size: 14px;
            }
            .el-step__description {
                color: #9090a0;
            }

            // tabs切换下划线
            .el-tabs__active-bar,
            .el-tabs__nav-wrap::after {
                height: 1px;
            }
            .el-tabs__item {
                height: 30px;
                line-height: 30px;
            }
        }
    }
}
</style>
